<template>
  <div class="companyPosition">
    <!-- 头部箭头 -->
    <van-nav-bar class="navTitle" title="在招职位" @click-left="$router.go(-1)">
      <template #left><i class="iconfont icon-jiantoujinggao"></i> </template
    ></van-nav-bar>
    <!-- tab固定 -->
    <div class="tabList">
      <van-tabs class="van_tag_box" v-model="active" sticky :offset-top="30">
        <van-tab v-for="(item, index) in screenDate.types" :key="index">
          <template #title>
            <span @click="Event(item)" :class="{ spansty: active === index }">
              {{ item }}
            </span>
          </template>
        </van-tab>
      </van-tabs>
    </div>

    <van-dropdown-menu class="menu">
      <van-dropdown-item
        v-model="value"
        :options="cityList"
        @change="onChange(value)"
        @open="openCity('city')"
      >
        <template #title>城市</template>
      </van-dropdown-item>
      <van-dropdown-item
        @change="onChange(value)"
        v-model="value"
        :options="experienceList"
        @open="openCity('experienceq')"
      >
        <template #title>经验</template>
      </van-dropdown-item>
      <van-dropdown-item
        :options="salaryList"
        @open="openCity('salary')"
        @change="onChange(value)"
        v-model="value"
      >
        <template #title>待遇</template>
      </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 企业职位信息列表 -->
    <positionItem v-for="(item, index) in showList" :key="index" :item="item" />
  </div>
</template>

<script>
import { positionFilters, companyPositions } from '@/api/api.js'
const positionItem = () => import('./positionItem')
export default {
  components: {
    positionItem
  },
  data () {
    return {
      loading: false,
      finished: false,
      isShow: false,
      screenDate: [],
      value: 0,
      cityList: [],
      salaryList: [],
      experienceList: [],
      showList: [],
      limit: 200,
      start: 0,
      city: null,
      experience: null,
      salary: null,
      type: null,
      active: '',
      c: ''
    }
  },
  methods: {
    openCity (c) {
      console.log(c)
      this.c = c
    },
    // 点击选项导致value值改变时触发
    async onChange (value) {
      if (this.c === 'city') {
        console.log(this.cityList)
        this.cityList.forEach(item => {
          if (item.value === value) {
            this.city = item.text
            if (item.value === 0) {
              this.city = null
            }
          }
        })
        console.log(this.city)
        this.showList = []
      } else if (this.c === 'salary') {
        this.salaryList.forEach(item => {
          if (item.value === value) {
            this.salary = item.text
            if (item.value === 0) {
              this.salary = null
            }
          }
        })

        console.log(this.salary)
        this.showList = []
      } else if (this.c === 'experienceq') {
        this.experienceList.forEach(item => {
          if (item.value === value) {
            this.experience = item.text
            if (item.value === 0) {
              this.experience = null
            }
          }
        })
        console.log(this.experience)
        this.showList = []
      }
      // 调用接口发送请求
      const res = await companyPositions({
        id: this.$route.params.id,
        limit: this.limit,
        start: this.start,
        city: this.city,
        experience: this.experience,
        salary: this.salary,
        type: this.type
      })
      console.log(res)
      this.showList = res.data.data.list
    },
    onLoad () {
      this.Event()
    },
    // 打开弹出框
    async Event (item) {
      // console.log(item)
      if (item === '全部') {
        // 调用接口发送请求
        this.type = null
        const res = await companyPositions({
          id: this.$route.params.id,
          limit: this.limit,
          start: this.start,
          city: this.city,
          experience: this.experience,
          salary: this.salary
        })
        this.showList = res.data.data.list
        this.finished = true
        console.log('全部职位', this.showList)
        return
      }
      this.showList = []
      this.type = item
      // 调用接口发送请求
      const res = await companyPositions({
        id: this.$route.params.id,
        limit: this.limit,
        start: this.start,
        type: this.type,
        city: this.city,
        experience: this.experience,
        salary: this.salary
      })
      this.showList = res.data.data.list

      console.log('职位', this.showList)
    },
    // 得到筛选数据
    async getScreendate () {
      const res = await positionFilters(this.$route.params.id)
      this.screenDate = res.data.data
      console.log(this.screenDate)
      this.screenDate.types.unshift('全部')
      this.cityList = res.data.data.cityFilters
      this.cityList.unshift('全部')
      this.cityList = this.cityList.map((item, index) => {
        return {
          text: item,
          value: index
        }
      })
      console.log('城市', this.cityList)
      this.salaryList = res.data.data.salaryFilters
      this.salaryList.unshift('全部')
      this.salaryList = this.salaryList.map((item, index) => {
        return {
          text: item,
          value: index
        }
      })
      this.experienceList = res.data.data.experienceFilters
      this.experienceList.unshift('全部')
      this.experienceList = this.experienceList.map((item, index) => {
        return {
          text: item,
          value: index
        }
      })
    }
  },
  created () {
    console.log(this.$route.params.id)
    this.$nextTick(() => {
      this.getScreendate()
      this.Event('全部')
    })
  }
}
</script>

<style lang="less" scoped>
.companyPosition {
  width: 100%;
  height: 800px;
  font-size: 16px;
  padding-top: 140px;
  box-sizing: border-box;
  .navTitle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 9999;
    i {
      margin-left: 20px;
      // margin-top: 30px;
      font-size: 28px;
      color: #000;
    }
  }
  /deep/.van-nav-bar__left {
    padding: 0;
  }
  .tabList {
    // margin-top: 20px;
    .tab {
      margin-left: 10px;
    }

    .van_tag_box {
      position: fixed;
      top: 50px;
      left: 0;
      width: 100%;
      z-index: 9999;
      /deep/ .van-tab__text {
        width: 54px;
        height: 28px;
        background-color: #f7f4f5;
        border-radius: 14px;
        text-align: center;
        line-height: 28px;
      }

      .spansty {
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 14px;
        background-color: rgb(0, 184, 212);
        color: #fff;
      }
      /deep/.van-tabs__line {
        display: none;
      }
    }
  }
  .menu {
    width: 100%;
    position: fixed;
    top: 90px;
    left: 0;
    .item {
      width: 100%;
      height: 50px;
      line-height: 50px;
      margin-left: 20px;
    }
  }
}
</style>
